<template>
  <div>
    <!-- 收银页面导航按钮 -->
    <div class="pos-entry">
      <NuxtLink to="/pos" class="pos-btn">
        <el-icon><ShoppingCart /></el-icon>
        <span>收银系统</span>
      </NuxtLink>
    </div>
    
    <!-- 主内容区域 -->
    <div class="container main-content">
      <div class="main-section">
        <div class="flex main-top-section">
          <!-- 左侧分类菜单 -->
          <CategoryMenu class="category-menu-container" />
          
          <!-- 中间轮播图 -->
          <div class="main-banner">
            <HomeBanner />
          </div>
          
          <!-- 右侧用户面板 -->
          <div class="side-panel">
            <UserPanel />
          </div>
        </div>
        
        <!-- 热门服务入口 -->
        <QuickEntry />
        
        <!-- 活动图片区域 -->
        <div class="promo-area">
          <div class="promo-item">
            <img src="https://img11.360buyimg.com/babel/s340x120_jfs/t1/141115/35/38418/34864/6431997dFbc34ff7b/1ddc3e99b825b2d5.jpg.webp" alt="促销活动1">
          </div>
          <div class="promo-item">
            <img src="https://img12.360buyimg.com/babel/s340x120_jfs/t1/163958/39/32788/24994/63ff3ec6F4f9edf5e/a6ee0b5e4cbc7c9c.jpg.webp" alt="促销活动2">
          </div>
          <div class="promo-item">
            <img src="https://img20.360buyimg.com/babel/s340x120_jfs/t1/3166/14/19882/23713/63fef19bF47c58b00/ec83af5b115474b9.jpg.webp" alt="促销活动3">
          </div>
        </div>
        
        <!-- 优惠活动区域 -->
        <PromoCards title="优惠活动" :promo-list="promoActivities" />
        
        <!-- 商品展示区域 - 猜你喜欢 -->
        <ProductSection title="猜你喜欢" :products="recommendProducts" />
        
        <!-- 商品展示区域 - 热卖商品 -->
        <ProductSection title="热卖商品" :products="hotProducts" />
        
        <!-- 商品展示区域 - 电子数码 -->
        <ProductSection title="电子数码" :products="digitalProducts" />
        
        <!-- 商品展示区域 - 家用电器 -->
        <ProductSection title="家用电器" :products="applianceProducts" />
      </div>
    </div>
    
    <!-- 快速回到顶部 -->
    <div class="back-to-top">
      <el-backtop :right="50" :bottom="100">
        <div class="top-btn">
          <el-icon><Top /></el-icon>
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Top, ShoppingCart } from '@element-plus/icons-vue'
import CategoryMenu from '~/components/home/CategoryMenu.vue'
import HomeBanner from '~/components/home/HomeBanner.vue'
import ProductSection from '~/components/home/ProductSection.vue'
import QuickEntry from '~/components/home/QuickEntry.vue'
import PromoCards from '~/components/home/PromoCards.vue'
import UserPanel from '~/components/home/UserPanel.vue'

// 优惠活动数据
const promoActivities = ref([
  {
    title: '时尚新品 潮流来袭',
    imgUrl: 'https://img30.360buyimg.com/babel/s300x300_jfs/t1/158379/8/8583/92879/603df6e9Ed466bcd8/cc0e7570f3da2344.jpg',
    link: '#',
    tag: '新品'
  },
  {
    title: '家电狂欢 满2000减200',
    imgUrl: 'https://img11.360buyimg.com/babel/s300x300_jfs/t1/133219/33/10318/117906/5f6c8fceE20ce4a27/9e5da54843adb0e3.jpg',
    link: '#',
    tag: '大促'
  },
  {
    title: '电脑办公 新品5折起',
    imgUrl: 'https://img12.360buyimg.com/babel/s300x300_jfs/t1/155578/25/20761/83075/603df56aEeecce92d/d9d461179d037afd.jpg',
    link: '#'
  },
  {
    title: '智能手表 运动必备',
    imgUrl: 'https://img14.360buyimg.com/babel/s300x300_jfs/t1/156892/4/656/70318/5fd45df0E021879b5/8c27b236ef8a1c5c.jpg',
    link: '#',
    tag: '爆款'
  }
]);

// 猜你喜欢 - 商品数据
const recommendProducts = ref([
  {
    id: 1,
    title: 'Apple iPhone 14 Pro (A2892) 256GB 深空黑色 支持移动联通电信5G 双卡双待手机',
    price: 7999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/139710/32/33474/48553/643ddff3F34853f1c/bd34293e4835f57c.jpg.webp',
    tag: '新品'
  },
  {
    id: 2,
    title: '小米 Redmi K60 12GB+512GB 墨羽 骁龙8+旗舰处理器 2K高光屏 6400万超清相机 67W快充',
    price: 2999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/121124/10/34890/66409/643ea06bF19bd4e92/57da850f3806a874.jpg.webp'
  },
  {
    id: 3,
    title: '华为 HUAWEI Mate 50 Pro 256GB曜金黑 超光变XMAGE影像 北斗卫星消息',
    price: 6799,
    imgUrl: 'https://img12.360buyimg.com/n1/s450x450_jfs/t1/175845/11/34577/55824/643dc661Fbdacbb43/7e2be4a13af1a0e6.jpg.webp',
    tag: '热销'
  },
  {
    id: 4,
    title: '联想(Lenovo)小新Air14 2022锐龙版14英寸轻薄笔记本电脑',
    price: 4299,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/168435/18/33619/64425/636b97fdE1311921b/0c8a48b42b5a8375.jpg.webp'
  },
  {
    id: 5,
    title: '戴尔(DELL)成就3520 15.6英寸笔记本电脑 i5-1235U 16G 512G',
    price: 4699,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/196236/31/32881/40387/6423e0faFafa10851/e1f6be7d27f0479c.jpg.webp'
  }
])

// 热卖商品 - 商品数据
const hotProducts = ref([
  {
    id: 6,
    title: 'OPPO Find X6 12GB+256GB 碧海 双模5G 8000万哈苏影像 旗舰芯片',
    price: 3999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/113605/31/36915/59659/64261b0cFa8df9673/9c026a0f8a548cf2.jpg.webp',
    tag: '热销'
  },
  {
    id: 7,
    title: 'vivo S17 12GB+512GB 初晨 骁龙778G+ 5000万超清前后影像',
    price: 2699,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/202302/38/31013/57767/6417ef0dF0eecf314/c5a9f5a54e8d9319.jpg.webp'
  },
  {
    id: 8,
    title: '小度智能音箱 Play 智能AI音箱 蓝牙音箱 全屋控制 语音助手',
    price: 99,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/203196/2/18131/77154/61a5ca52Ed7ed18c6/25225419ae7135da.jpg.webp'
  },
  {
    id: 9,
    title: '微软（Microsoft）Surface Pro 9 二合一平板电脑笔记本 i7-1255U 16G 256G 典雅黑',
    price: 11588,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/164987/25/33664/10139/6410b43bF8afc7430/0e14d481014e0b52.jpg.webp'
  },
  {
    id: 10,
    title: 'Apple MacBook Air 13.3 8核M1芯片(7核图形处理器) 8G 256G SSD 深空灰 笔记本电脑',
    price: 7299,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/170294/25/27272/23913/628f5b48Efe51845e/0cba570692a540fb.jpg.webp',
    tag: '热销'
  }
])

// 电子数码 - 商品数据
const digitalProducts = ref([
  {
    id: 11,
    title: 'Sony索尼 WH-1000XM4 无线蓝牙降噪耳机 头戴式耳机 游戏耳机',
    price: 2299,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/223446/16/15118/32621/6268ea8dE6f49fc15/d56a78cef8a00ec9.jpg.webp'
  },
  {
    id: 12,
    title: 'Apple AirPods Pro 2代 主动降噪无线蓝牙耳机',
    price: 1899,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/188421/4/32342/18026/63985b35Ef5eb8253/81e112a26621acb8.jpg.webp',
    tag: '新品'
  },
  {
    id: 13,
    title: 'DJI 大疆 Mini 3 Pro 无人机航拍器 迷你可折叠 超轻小型无人机',
    price: 4788,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/172320/29/35140/54285/642a99dbF7a5e2d5d/74228bf181d8a78d.jpg.webp'
  },
  {
    id: 14,
    title: '佳能（Canon）EOS R10 微单相机 数码相机 专微 Vlog相机',
    price: 6299,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/91835/33/31838/52650/64180a19F37cac35b/7c088a52e4c016c3.jpg.webp'
  },
  {
    id: 15,
    title: '华为智慧屏V系列 V75 Super 75英寸4K HDR超薄全面屏液晶电视',
    price: 13999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/188175/5/29731/41294/639837a9Ec59f1ab7/cebe30da3ec2bc4b.jpg.webp',
    tag: '热销'
  }
])

// 家用电器 - 商品数据
const applianceProducts = ref([
  {
    id: 16,
    title: '海尔(Haier)纤见550升对开门冰箱双开门一级能效',
    price: 3699,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/186160/27/28881/49000/63dd81f2F04ebde22/e1908d1eb7d0989d.jpg.webp'
  },
  {
    id: 17,
    title: '美的(Midea)新能效 1.5匹 变频冷暖 挂机空调',
    price: 2299,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/153067/40/22871/59922/61dbf88dEf25e6f6c/13f7e3fa0db9ebe0.jpg.webp',
    tag: '节能'
  },
  {
    id: 18,
    title: '小米电视EA75 2022款 75英寸 4K超高清HDR 大屏液晶平板电视',
    price: 3999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/205933/10/31025/100549/63f75d61F1fb46270/8de881eb6e0a28ea.jpg.webp'
  },
  {
    id: 19,
    title: '戴森(Dyson)V12 detect slim 手持无线吸尘器',
    price: 4490,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/221244/12/20877/85577/635f57cdE3a1b7eec/9c0dac2a0e66d788.jpg.webp'
  },
  {
    id: 20,
    title: '博世(BOSCH) 全自动滚筒洗衣机 洗烘一体 变频静音 10公斤',
    price: 4999,
    imgUrl: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/209381/21/30132/75959/63d8ff7fF00ff1bf6/bcc4af357db9284b.jpg.webp',
    tag: '新品'
  }
])
</script>

<style lang="scss" scoped>
.main-content {
  padding: 10px 0;
  
  .main-section {
    .main-top-section {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .category-menu-container {
      flex-shrink: 0; // 防止分类菜单被压缩
    }
    
    .main-banner {
      flex: 1;
    }
    
    .side-panel {
      width: 250px;
      flex-shrink: 0; // 防止侧边栏被压缩
    }
  }
  
  .promo-area {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    
    .promo-item {
      width: 32%;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        transition: transform 0.5s;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}

.back-to-top {
  .top-btn {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    
    .el-icon {
      font-size: 20px;
    }
  }
}

/* 收银入口按钮 */
.pos-entry {
  position: fixed;
  right: 50px;
  top: 150px;
  z-index: 999;
}

.pos-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #1e4b9a;
  color: white;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}

.pos-btn:hover {
  transform: scale(1.05);
  background-color: #2255b5;
}

.pos-btn .el-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.pos-btn span {
  font-size: 12px;
}
</style> 